import styled from 'styled-components';
import bigdate from '../../icon/date.png';
import smalldate from '../../icon/smalldate.png'
export  const HomeWrapper=styled.div`
width:100%;
  height:3150px;

  @media (max-width: 1600px) {
   height:3100px;
  }
   @media (max-width: 1300px) {
    height:3000px;
  }
`
export const SlideshowDiv =styled.div`

    width:100%;
  
.lbt{
width:100%;
height:500px;
}
.lbtButton{
position:absolute;
      top: 330px;
     text-align: center;
      height:16vh;
      z-index:100;
      
       width: 12%;
       //background: rgba(0,0,0,0.2);
      outline: 'none';
      border: 'none';
      }
      
     .left{
     left:9.1%;
       @media (max-width: 1700px) {
 left:4.2%;
  }
    @media (max-width: 1500px) {
    left:1.6%;
  }
   @media (max-width: 1300px) {
  left:0;
  }
     }
     
     .right{
        right:9.2%;
       @media (max-width: 1700px) {
 right:4.4%;
  }
    @media (max-width: 1500px) {
    right:1.8%;
  }
   @media (max-width: 1300px) {
  right:0;
  }
     } 
     
`

export const ListWrapper =styled.div`
    
    float:left;
    width:50%;
     text-align:left;
   
`
export const ListA =styled.div`
  width:70%;
  height:400px;
  margin:50px auto;
  // background:#EAF5FF;
  @media (max-width: 1700px) {
   width:80%;
  }
    @media (max-width: 1500px) {
   width:85%;
  }
   @media (max-width: 1300px) {
   width:90%;
  }
  
   .more{ 
    color:#0d6fb8;
    float:right;
    padding-top:20px;
    font-size:25px;
    }
    
    &.school{
    height:600px;
     @media (max-width: 1300px) {
   height:500px;
  }
    }
    
     &.base{
     
       @media (max-width: 1800px) {
   height:360px;
  }
      @media (max-width: 1500px) {
   height:350px;
  }
     @media (max-width: 1200px) {
   height:330px;
  }
    @media (max-width: 1050px) {
   height:300px;
  }
    }
    
    .publicity{
    textAlign: center;
     height:140px;
     line-height: 120px;
      background:#eeefef;
       overflow: hidden;
    }
  
`

export const ListBox =styled.div`
text-align:center;
 padding-top:16px
height:280px;
  width:100%;
.title{
float:left;
    margin:0;
 font-size:36px;
 font-weight: bold;
    color:#0d6fb8;
    border-bottom:1.5px solid #0d6fb8; 
    }

    .imgtitle{
    height:60px;
   cursor:pointer;
font-size:20px;
  margin:0;
    color:#0d6fb8;
    @media (max-width: 1600px) {
font-size:19px;
  }
     @media (max-width: 1350px) {
font-size:18px;
  }
  @media (max-width: 1100px) {
font-size:16px;
  }
    }
`
export const ListWrapperB=styled.div`
height:75%;
width:48%;
float:left;
cursor:pointer;
 background:#eeefef;
 margin:1vw 0;
  .left{
  float:left:
 }
  .right{
 float:right;
 }

 .box{
 padding:10px;
 height:100%;
 width:40%;

 }

`
export const ListWrapperC=styled.div`
cursor:pointer
float:left;
height:90%;
width:22%;
.font{
font-size:28px;
background:#eeefef;
margin:0 auto ;
color:#0d6fb8;
width:100%;
padding: 20px 0;
}
.img{
margin:20px 0;
width:100%;

}
`
export const ListWrapperD=styled.div`
cursor:pointer
float:left;
height:50%;
width:30%;
 .img{
 margin:20px 20px 0 0;
 width:100%;
 height:80%;}
`
//回到顶部
export const BackTop=styled.div`
position:fixed;
right:50px;
bottom:80px;
width:70px;
height:60px;

text-align:center;
font-size:14px;
text-align:center;
`;
export const DateShow =styled.div`
text-align:center;
font-weight: bold;
color:white;
font-size:20px;
padding:6px 0px;
position:absolute;
    height:80px;
    width:80px;
   background:url(${bigdate})  no-repeat;
`;
export const SmallDateShow =styled.div`
text-align:center;
font-weight: bold;
color:white;
font-size:15px;
padding:8px 0px;
float:left;
line-height:22px;
margin-right:10px;
    height:60px;
    width:60px;
   background:url(${smalldate})  no-repeat;
`;